<template>
  <div v-show="text" class="content">
    <div class="text" :class="{ isExpanded }">
      <label class="btn" @click="expandText" v-if="!isExpanded && showExpanded">展开<icon-down /></label>
      <span>
        {{ text }}
        <label class="btn" @click="expandText" v-if="isExpanded && showExpanded">收起<icon-up /></label>
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  text: { type: String, default: "" }, // 显示的文案
  defaultExpanded: { type: Boolean, default: false }, // 默认展开、或者收起
  showExpanded: { type: Boolean, default: true }, // 是否开启展开或者收起功能
});

const isExpanded = ref(props.defaultExpanded);

const expandText = () => {
  isExpanded.value = !isExpanded.value;
};

defineExpose({ isExpanded, expandText });
</script>

<style scoped>
.content {
  display: flex;
  width: 6rem;
}

.content .text {
  word-break: break-all;
  font-size: 0.14rem;
  margin-bottom: 0.08rem;
}

.content .text::before {
  content: "";
  float: right;
  height: 100%;
  margin-bottom: -1.2rem;
}

.content .text:not(.isExpanded)::before {
  margin-bottom: -0.15rem;
}

.content .text:not(.isExpanded) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.content .text .btn {
  float: right;
  clear: both;
  margin-right: 0.08rem;
  cursor: pointer;
  color: dodgerblue;
}
</style>